<template>
  <div style="z-index: 1; height: 500px; padding-top: 5px">
    <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { operatorActivityTrend } from '@/api/statistic'

export default {
  name: 'activeOperatorCountChart',
  mixins: [resize],
  data() {
    return {
      series: [],
      chart: null,
      emptyVisible: false,
      legend: [],
      xAxisData: [],
      groupData: [],
      drilldownData: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initData('Day', 7)
    })
  },
  methods: {
    initData(dateUnit, timeRange) {
      var params = {
        dateUnit: dateUnit,
        dateRange: timeRange
      }
      operatorActivityTrend(params)
        .then((res) => {
          var isEmpty = true
          console.log(res.groupData.length)
          for (var i = 0; i < res.groupData.length; i++) {
            if (res.groupData[i].value !== 0) {
              isEmpty = false
              break
            }
          }
          if (isEmpty) {
            this.emptyVisible = true
          } else {
            this.xAxisData = res.xAxisData
            this.groupData = res.groupData
            this.drilldownData = res.drilldownData
            this.initChart()
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    initChart() {
      const chart = echarts.init(this.$el)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          dataName: 'Operator',
          data: this.xAxisData
        },
        yAxis: {},
        dataGroupId: '',
        legend: {},
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: {
              show: true,
              readOnly: true,
              title: 'Data View',
              lang: [
                'Data View',
                `<span id="${this.$options.name}">Close</span>`,
                'Refresh'
              ],
              optionToContent: function (opt) {
                var axisData = opt.xAxis[0].data
                var series = opt.series
                var dataName = opt.xAxis[0].dataName
                var tdHeads =
                  '<td  style="padding:0 10px">' + dataName + '</td>'
                series.forEach(function (item) {
                  tdHeads +=
                    '<td style="padding: 0 10px">' + item.name + '</td>'
                })
                var table =
                  '<table id="dataView" border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;width:95%;height:100%"><tbody><tr>' +
                  tdHeads +
                  '</tr>'
                var tdBodys = ''
                for (var i = 0, l = axisData.length; i < l; i++) {
                  for (var j = 0; j < series.length; j++) {
                    if (typeof series[j].data[i] === 'object') {
                      tdBodys += '<td>' + series[j].data[i].value + '</td>'
                    } else {
                      tdBodys += '<td>' + series[j].data[i] + '</td>'
                    }
                  }
                  table +=
                    '<tr><td style="padding: 0 10px">' +
                    axisData[i] +
                    '</td>' +
                    tdBodys +
                    '</tr>'
                  tdBodys = ''
                }
                table += '</tbody></table>'
                return table
              },
              contentToOption: function (opt) {
                console.log(opt)
              }
            },
            magicType: {
              show: true,
              title: {
                line: 'Toggle - Line Chart',
                bar: 'Toggle - Column Chart'
              },
              type: ['line', 'bar']
            },
            restore: { show: true, title: 'Restore' },
            saveAsImage: { show: true, title: 'Save Image' }
          }
        },
        series: {
          type: 'bar',
          id: 'sales',
          name: 'Operator Activity',
          data: this.groupData,
          universalTransition: {
            enabled: true,
            divideShape: 'clone'
          }
        }
      }
      const drilldownData = this.drilldownData
      chart.on('click', function (event) {
        if (event.data) {
          // var groupId = event.data.groupId
          var subData = drilldownData.find(function (data) {
            return data.dataGroupId === event.data.groupId
          })
          if (!subData) {
            return
          }
          chart.setOption({
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              dataName: 'Date',
              // dataName: groupId,
              data: subData.data.map(function (item) {
                return item[0]
              })
            },
            legend: {
              // data: [this.$t('data_center.toms_app_total_count')]
              // data: ['value']
            },
            series: {
              name: 'Operator Activity',
              type: 'bar',
              id: 'sales',
              dataGroupId: subData.dataGroupId,
              data: subData.data.map(function (item) {
                return item[1]
              }),
              universalTransition: {
                enabled: true,
                divideShape: 'clone'
              }
            },
            graphic: [
              {
                type: 'text',
                left: 50,
                top: 2,
                style: {
                  text: 'Back',
                  fontSize: 18
                },
                onclick: function () {
                  chart.setOption(option, true)
                }
              }
            ]
          })
        }
      })
      chart.setOption(option)
    }
  }
}
</script>

<style>
</style>
